<template>
  <div class="dashboard-container">
    <el-card shadow="never">
      <el-row justify="space-between">
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="mr-5 rounded-full"
              style="width: 80px"
              :src="'dev-api/img/user/' + userStore.user.avatar"
              onerror="this.src='src/assets/images/normal-head.png'"
              alt=""
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                今日天气晴朗，气温在15℃至25℃之间，东南风。
              </p>
            </div>
          </div>
        </el-col>

        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center justify-around">
            <el-statistic
              :value="announceCount"
            >
              <template #title>
                <div class="flex items-center">
                  <svg-icon icon-class="document" size="20px" />
                  <span class="text-[16px] ml-1">公告</span>
                </div>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--    公告-->
    <el-collapse class="mt-3">
      <el-collapse-item style="border: 1px solid #ddd;box-sizing: border-box" @click="isAnnounceShow=!isAnnounceShow">
        <template #title>
          <div
            class="flex items-center justify-between"
            style="padding-left: 20px;border-bottom: 1px solid #ddd;width: 100%;"
          >
            <h3 v-show="!isAnnounceShow" class="text-[var(--el-text-color-secondary)]">
              公告<span style="font-size: 12px;font-weight: 1">(展开)</span>
            </h3>
            <h3 v-show="isAnnounceShow" class="text-[var(--el-text-color-secondary)]">
              公告<span style="font-size: 12px;font-weight: 1">(收起)</span>
            </h3>
          </div>
        </template>
        <el-col
          class="mt-3"
          :xs="24"
          :sm="100"
          :lg="100"
          v-for="(item, index) in announcements"
          :key="index"
          style="padding: 10px;"
        >
          <el-card shadow="never">
            <template #header>
              <div class="flex items-center justify-between">
                    <span class="text-[var(--el-text-color-secondary)]">
                      {{ item.title }}
                    </span>
                <el-tag :type="announceStatus[item.category]">
                  {{ item.category }}
                </el-tag>
              </div>
            </template>
            <div class="flex items-center justify-between mt-5">
              <div class="text-lg text-right">
                {{ item.content }}
              </div>
            </div>
            <div
              class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
            >
              <span> {{ new Date(item.createdAt).toLocaleString() }} </span>
<!--              <el-link-->
<!--                @click="readAnnounce"-->
<!--                type="primary"-->
<!--                :underline="false"-->
<!--                style="user-select: none"-->
<!--              >标记已读-->
<!--              </el-link>-->
            </div>
          </el-card>
        </el-col>
      </el-collapse-item>
    </el-collapse>
    <!--公告第一条信息-->
    <el-row v-show="!isAnnounceShow">
      <el-col
        :xs="24"
        :sm="200"
        :lg="100"
      >
        <el-card shadow="never">
          <template #header>
            <div class="flex items-center justify-between">
                    <span class="text-[var(--el-text-color-secondary)]">
                      {{ announcements[0].title }}
                    </span>
              <el-tag :type="announceStatus[announcements[0].category]">
                {{ announcements[0].category }}
              </el-tag>
            </div>
          </template>
          <div class="flex items-center justify-between mt-5">
            <div class="text-lg text-right">
              {{ announcements[0].content }}
            </div>
          </div>
          <div
            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
          >
            <span> {{ new Date(announcements[0].createdAt).toLocaleString() }} </span>
<!--            <el-link-->
<!--              @click="readAnnounce"-->
<!--              type="primary"-->
<!--              :underline="false"-->
<!--              style="user-select: none"-->
<!--            >标记已读-->
<!--            </el-link-->
<!--            >-->
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- Echarts 图表 -->
<!--    <el-row :gutter="10" class="mt-3">-->
<!--      <el-col-->
<!--        :xs="24"-->
<!--        :sm="12"-->
<!--        :lg="8"-->
<!--        class="mb-2"-->
<!--        v-for="item in chartData"-->
<!--        :key="item"-->
<!--      >-->
<!--        <component-->
<!--          :is="chartComponent(item)"-->
<!--          :id="item"-->
<!--          height="400px"-->
<!--          width="100%"-->
<!--          class="bg-[var(&#45;&#45;el-bg-color-overlay)]"-->
<!--        />-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script setup lang="ts">
import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";

defineOptions({
  name: "Dashboard",
  inheritAttrs: false
});

import { useUserStore } from "@/store/modules/user";
import { LogisticsStore } from "@/store/modules/logistics";
import { useTransition, TransitionPresets } from "@vueuse/core";
import { onMounted, ref } from "vue";

const getAnnouncementInfo = () => {
  return LogisticsStore().getAnnouncementInfo();
};
const announcements = LogisticsStore().announcement;

const duration = 5000;

let announces = ref(0);
const announceCount = useTransition(announces, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo
});
getAnnouncementInfo().then(r=>{
  announces.value = announcements.length
})


const announceStatus = {
  emergency: "danger",
  event: "info",
  rules_update: "success"
};
let isAnnounceShow = ref(false);
const readAnnounce = () => {
};

const userStore = useUserStore();
const date: Date = new Date();

const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.username + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.username + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.username + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 销售额
const amount = ref(0);
const amountOutput = useTransition(amount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo
});
amount.value = 2000;

// 访客数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo
});
visitCount.value = 2000;

// IP数
const dauCount = ref(0);
const dauCountOutput = useTransition(dauCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo
});
dauCount.value = 2000;

// 订单量
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo
});
orderCount.value = 2000;

// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "message",
    title: "消息",
    key: "message"
  },
  {
    value: 50,
    iconClass: "todolist",
    title: "待办",
    suffix: "/100",
    key: "upcoming"
  },
  {
    value: 10,
    iconClass: "project",
    title: "项目",
    key: "project"
  }
]);

interface CardProp {
  title: string;
  tagType: EpPropMergeType<
    StringConstructor,
    "primary" | "success" | "info" | "warning" | "danger",
    unknown
  >;
  tagText: string;
  count: any;
  dataDesc: string;
  iconClass: string;
}

// 卡片数量
const cardData = ref<CardProp[]>([
  {
    title: "访客数",
    tagType: "success",
    tagText: "日",
    count: visitCountOutput,
    dataDesc: "总访客数",
    iconClass: "visit"
  },
  {
    title: "IP数",
    tagType: "success",
    tagText: "日",
    count: dauCountOutput,
    dataDesc: "总IP数",
    iconClass: "ip"
  },
  {
    title: "销售额",
    tagType: "primary",
    tagText: "月",
    count: amountOutput,
    dataDesc: "总IP数",
    iconClass: "money"
  },
  {
    title: "订单量",
    tagType: "danger",
    tagText: "季",
    count: orderCountOutput,
    dataDesc: "总订单量",
    iconClass: "order"
  }
]);
// 图表数据
const chartData = ref(["BarChart", "PieChart", "RadarChart", "FunnelChart"]);
const chartComponent = (item: string) => {
  return defineAsyncComponent(() => import(`./components/${item}.vue`));
};

onMounted(() => {
  // getAnnouncementInfo();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
